<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>main</title>
    <meta name="description" content="main">
    <meta name="keywords" content="main">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../editormd/css/editormd.preview.min.css" />
    <!--<link rel="stylesheet" href="../css/fonts/element-icons.woff">-->
    <!-- 引入组件库 -->

    <script src="../js/vue.js"></script>
    <script src="../js/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../editormd/js/editormd.min.js"></script>
    <script src="../editormd/js/marked.min.js"></script>
    <script src="../editormd/js/prettify.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>

    <style type="text/css">
        .hold-transition{

            margin:0 auto;
            /*width:1700px;*/

        }
        #test-markdown-view{
            width:74%;
            float: left;
        }
        #custom-toc-container{
            width: 20%;
            float: left;
            margin-left:77%;
            position:fixed;
        }
        a {font-size:16px}
        /*未访问：蓝色、无下划线*/
        a:link {color: #909399; text-decoration:none;}
        /*//激活：红色*/
        a:active {color: red;}
        /*//已访问：purple、无下划线*/
        a:visited {color:#909399;text-decoration:none;}
        /*//鼠标移近：红色、下划线*/
        a:hover {color: red; text-decoration:underline;}

        .box-card {

        }
    </style>
</head>
<body class="hold-transition" style="border: #5daf34 solid 1px" >
    <div id="app">

            <div id="test-markdown-view">
                <!-- Server-side output Markdown text -->
                <textarea style="display:none;">
                    {{maintext}}
                </textarea>

            </div>


            <el-card class="box-card" id="custom-toc-container" style="border: #5daf34 solid 1px" shadow="hover">

            </el-card>


    </div>

</body>


<script>
    var vue =new Vue({
        el: '#app',
        data:{
            maintext:""
        },
        beforeCreate(){

            axios.get("/markDown/read.do").then((res)=>{
                if (res.data.flag){
                    this.maintext = res.data.data;

                    $(function() {
                        editormd.markdownToHTML("test-markdown-view", {
                            htmlDecode: "style,script,iframe",
                            emoji: true,
                            taskList: true,
                            tocm: true,
                            toc:true,
                            tex: true, // 默认不解析
                            flowChart: true, // 默认不解析
                            sequenceDiagram: true, // 默认不解析
                            codeFold: true,
                            tocContainer: "#custom-toc-container",

                        });
                    });
                }
            })
        },
        methods:{


        },
    });
</script>
<script type="text/javascript">


</script>
</html>
